<!-- 已分配项目 -->
<template>
        
    <div>
      <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
      <div class="inline-container">
        
        <!-- ctrl+alt+l 格式化代码   -->
        <el-input v-model="searchForm.name"  class="input1" clearable placeholder="请输入项目名称"
                  size="small" ></el-input>
        <el-button type="primary" icon="el-icon-search" size="small" class="serch" @click="handleSearch">搜索</el-button>
        <el-button type="primary" @click="back()" size="small" class="return" >返回</el-button>
      </div>
      <div>
        <el-button type="primary" @click="handleAdd" size="small">新增</el-button>
        
      </div>
  
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
        prop="id"
        label="ID"
        width="70">
    </el-table-column>
    <el-table-column
        prop="name"
        label="项目名称"
        width="300">
    </el-table-column>
    <el-table-column
        prop="projectVersion"
        label="版本"
        width="300">
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="发布时间"
        width="300">
    </el-table-column>
    <!-- <el-table-column
        prop="maintenanceEffectiveness"
        label="维护绩效"
        width="200">
    </el-table-column> -->
    <el-table-column
        prop="updateTime"
        label="更新时间"
        width="230">
    </el-table-column>
            
        <el-table-column label="操作"
                         width="150"
                         align="center">
        >
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
           
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!--自定义分页组件-->
      <custom-pages
          @current-change="currentChange"
          @size-change="sizeChange"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          :current-page="pageInfo.pageNum"
          class="custom-pages"
      >
      </custom-pages>
      <!--自定义分页组件-->
    

      <!--自定义抽屉组件-->
      <custom-drawer
          :form-data="formData"
          :rules-form="ruleForm"
          @close-drawer="closeDrawer"
          @submit-drawer="submitDrawer"
          :is-drawer-dialog="isDrawerDialog"
      >
        <div slot="content">
        <el-form-item label="选择项目" prop="projectId" >
          <el-select v-model="formData.projectId" placeholder="请选择项目">
            <el-option
              v-for="item in rolelist"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          </el-form-item>
         
          
        </div>
      </custom-drawer>
      <!--自定义抽屉组件-->

      <el-dialog
        title="提示"
        :visible.sync="error"
        width="30%"
        append-to-body
        top="20%"
        ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
        <span>{{ message }}</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="error = false">取 消</el-button>
            <el-button type="primary" @click="error = false">确 定</el-button>
        </span>
        </el-dialog>
      
         
       
        
    </div>
    
  </template>
  
  <script>
  
  //引入混入
  import create from "@/mixins/create";
  import http from "@/utils/request"
  // import CustomPages from "@/components/CustomPages"

  export default {
    data() {
      //页面格式化 ctrl+alt+l
      return {
        api: {
          pageUrl: "/system/getuserproject",
          saveUrl: "/system/adduserproject",
          delUrl: "/system/deleteuserproject",
          modUrl: "",
          search:"/system/selectuserproject",
        },
        ruleForm: {
            projectId: [
            {required: true, message: '请选择项目', trigger: 'blur'},
          ],
          
        },
  
        formData: {
          id: null,
          projectId:'',
          userId:'',
        },
        searchForm: {
          name:'',
        },
        message:'',
        rolelist: [{
          id: '',
          name: ''
        }, ],
      }
    },
    mixins: [create],
    created() {
        this.getproject()
    },
    methods: {
      back(){
        sessionStorage.removeItem('userId2')
        this.$router.push('UserManagement')
      },
      //获取项目列表
      getproject(){
        
        http.get('/project/getproject').then((res)=>{
          if(res.data.code ==200){
            this.rolelist = res.data.data;
          }
          

        })

      },
      getList() {
        let data = Object.assign(this.searchForm, this.pageInfo)
        
        let formData1 = {
          //当前页
          pageNum: this.pageInfo.pageNum,
          //分页大小
          pageSize:this.pageInfo.pageSize,
          //总条数
          total: this.pageInfo.total,
          userId:sessionStorage.getItem('userId2')
        };
        
        http.get(`${this.api.pageUrl}?${new URLSearchParams(formData1).toString()}`).then(res => {  
            if(res.data.code ==200){
                this.tableData = res.data.data.records
                this.pageInfo.total = res.data.data.total
                console.log(res)
            }
            else{
                    this.message=res.data.msg;
                    this.error=true;
            }
        })
    },
    //提交数据
    submitDrawer(e) {
            //增加数据
            if(sessionStorage.getItem('judge') == '1'){
                this.formData.userId=sessionStorage.getItem("userId2");
                let formData1={
                    projectId:this.formData.projectId,
                    userId:this.formData.userId
                }
                console.log(formData1)
                http.get(`${this.api.saveUrl}?${new URLSearchParams(formData1).toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else {
                        this.message=res.data.msg,
                        this.error=true,
                        
                        this.getList()
                    }
                })
            }
            //修改数据
            else if(sessionStorage.getItem('judge') == '2'){
                http.post(this.api.modUrl, e).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else{
                        this.message=res.data.msg;
                        this.error=true;
                        
                      }
                })
            }
        },
        //单个删除
        handleDelete(index, row) {
            // console.log(index, row);
            this.ids = [row.id]
            // this.batchDelete()
            const id =this.ids[0];
            this.formData.userId=sessionStorage.getItem("userId2");
            let formData = {
                projectId: id,
                userId:this.formData.userId
            };
            //
            this.$confirm(`此操作将永久删除ID为[${this.ids[0]}]的数据, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                http.delete(`${this.api.delUrl}?${new URLSearchParams(formData).toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                })
            }).catch(() => {
                // this.message=res.data.msg,
                // this.error=true,
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                this.$refs.multipleTable.clearSelection();
            });
        },
        //搜索
        handleSearch() {
            let formData1={
                //当前页
                pageNum: this.pageInfo.pageNum,
                //分页大小
                pageSize:this.pageInfo.pageSize,
                userId:sessionStorage.getItem('userId2'),
                name:this.searchForm.name,
            }
            
            http.get(`${this.api.search}?${new URLSearchParams(formData1).toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        console.log(res)
                        this.message=res.data.msg,
                        this.error=true,
                        //更换表格数据
                        this.tableData = res.data.data.records
                        this.pageInfo.total = res.data.data.total//动态获取分页
                    }
                    else {
                        this.message=res.data.msg,
                        this.error=true,
                        this.getList()
                    }
                })
        },
    },
    
  };
  </script>
  
  <style scoped>
  .input1{
    width: 260px;
  }

  .notitle{
    color: black;
    font-size:25px;
    margin-top: 1%; 
    margin-left: 0%;
  }/* 面包屑 */

  
  .custom-pages {
    position: absolute;
    /* position: relative; */
    top: 100%;
    /* 设置其始终位于页面底部 */
  }

  .inline-container{
    display: flex;
    
  }
  /* 搜索按钮 */
  .serch{
    
    margin-right: 10px;
  }
  /* 返回按钮 */
  .return{
    
    margin-left: 940px;
    width: 100px;
  }
  </style>